<template>
	<div class="my-chart-configurations-data-ajax">
		<n-card class="n-card-shallow">
			<setting-item-box name="请求接口">
				<setting-item name="数据源">
					<my-select
						v-model="compReq.sourceID"
						:list="sourceOptions"
						:fileType="{ label: 'title', value: 'id' }"
					></my-select>
				</setting-item>
				<setting-item name="选择接口">
					<my-select
						v-model="compReq.reqID"
						:list="reqInterfaceOptions"
						:fileType="{ label: 'sqlName', value: 'id' }"
					></my-select>
				</setting-item>
			</setting-item-box>
			<setting-item-box name="更新间隔" alone v-if="!MyBasicTable">
				<setting-item>
					<my-input-number v-model.trim="compReq.requestInterval">
						<template #append>
							<my-select
								v-model="compReq.requestIntervalUnit"
								:clearable="false"
								:list="selectTimeOptions"
								style="width: 95px"
							/>
						</template>
					</my-input-number>
				</setting-item>
			</setting-item-box>
		</n-card>

		<!-- 底部数据展示 -->
		<chart-data-matching-and-show
			v-if="!MyBasicTable"
			:show="showMatching && !loading"
			:ajax="true"
		></chart-data-matching-and-show>
	</div>
</template>

<script setup>
import ChartDataMatchingAndShow from '../ChartDataMatchingAndShow/index.vue';
import { listSource, listArrange } from '@a/data';

const props = defineProps({
	request: {
		type: Object
	},
	MyBasicTable: {
		type: Boolean,
		default: false
	}
});

// 是否展示数据分析
const loading = ref(false),
	showMatching = ref(false);

const compReq = toRef(props.request || $store.chart.getTargetData.orgConfig.request);

let sourceOptions = ref([]);
listSource().then((res) => {
	sourceOptions.value = res.data;
});

let reqInterfaceOptions = ref([]);
watch(
	() => compReq.value.sourceID,
	(val) => {
		if (!val) {
			compReq.value.reqID = val;
		} else {
			listArrange({ dataSourceId: val }).then((res) => {
				reqInterfaceOptions.value = res.data;
			});
		}
	},
	{ immediate: true }
);

let selectTimeOptions = [
	{ dictLabel: '秒', dictValue: '秒' },
	{ dictLabel: '分', dictValue: '分' },
	{ dictLabel: '时', dictValue: '时' },
	{ dictLabel: '天', dictValue: '天' }
];
</script>

<style lang="scss" scoped>
@include b('chart-configurations-data-ajax') {
	.n-card-shallow {
		:deep(.n-card__content) {
			padding: 10px 0 0;
		}

		.edit-text {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			cursor: pointer;
			opacity: 0;
			transition: all 0.3s;
			background-color: var(--el-mask-color-extra-light);
		}
		&:hover {
			border-color: var(--el-color-primary);
			.edit-text {
				opacity: 1;
			}
		}
	}
}
</style>
